<template>
<h3>侦听器</h3>
<p>{{ message }}</p>
<button @click="updateHandle">修改数据</button>
</template>

<script>
export default{
    data () {
        return {
            message:"Hello"
        }
    },
    methods: {
        updateHandle(){
            this.message = "World"
        }
    },
    watch: {
        // newValue 改变之后的数据
        // oldValue 改变之前的数据
        // 函数名称于侦听数据名称一致
        message(newValue,oldValue){
            // 数据发生变化，自动执行
            console.log(newValue, oldValue);
            
        }
    }
}
</script>